<template>
  <div class="statistic-card">
    <el-statistic :value="count || '--'">
      <template #title>
        <div style="display: inline-flex; align-items: center">
          {{ info.message }}
          <el-tooltip
            effect="dark"
            content="Number of users who logged into the product in one day"
            placement="top"
          >
            <el-icon :size="12">
              <Warning />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
    </el-statistic>
  </div>
</template>

<script>
import StatisticApiService from "@/api/statistic";
import dayjs from "dayjs";
export default {
  name: "StatisticItem",
  props: {
    info: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      count: "",
      timer:'',
      message: "",
    };
  },
  mounted() {
    this.init();
    // 实时更新接口
    this.getCurrentCount();
  },
  methods: {
    async init() {
      try {
        const res = await StatisticApiService.getStatisticCountApi(
          this.info.type
        );
        this.count = res;
      } catch (error) {
        console.log(error);
      }
    },
    getCurrentCount() {
      // 递归调用
      this.timer = setTimeout(async () => {
        await this.init(); // 先调用之前的，在调用现在的
        this.getCurrentCount();
      }, 5000);

      //-----------------------------------------
      // 10000毫秒掉一次接口
      // setTimeout( () => {
      //   console.log(dayjs().format("YYYY-MM-DD HH:mm:ss"), "----1111");
      //   this.init();
      // }, 10000);
    },
  },
  // 组件销毁时定时器清空
  beforeUnmount() {
    this.timer && clearTimeout(this.timer);
  },
};
</script>

<style lang="scss" scoped></style>
